<script setup>
import { ref, computed } from 'vue'

// 操作日志数据
const operationLogs = ref([
  {
    id: 1,
    action: '登录系统',
    module: '系统',
    details: '用户登录成功',
    ip: '192.168.1.100',
    time: '2025-09-26 09:30:15',
    status: 'success'
  },
  {
    id: 2,
    action: '创建评测',
    module: '评测管理',
    details: '创建了新的心理健康评测',
    ip: '192.168.1.100',
    time: '2025-09-26 10:15:22',
    status: 'success'
  },
  {
    id: 3,
    action: '查看报告',
    module: '报告管理',
    details: '查看了学生张三的评测报告',
    ip: '192.168.1.100',
    time: '2025-09-26 11:20:45',
    status: 'success'
  },
  {
    id: 4,
    action: '导出数据',
    module: '数据管理',
    details: '导出评测数据失败',
    ip: '192.168.1.100',
    time: '2025-09-26 14:30:10',
    status: 'error'
  },
  {
    id: 5,
    action: '修改个人信息',
    module: '个人中心',
    details: '更新了个人联系方式',
    ip: '192.168.1.100',
    time: '2025-09-26 15:45:30',
    status: 'success'
  }
])

// 分页相关
const currentPage = ref(1)
const pageSize = ref(10)
// 已应用的筛选条件（点击“搜索”后生效）
const appliedFilters = ref({
  module: '',
  status: '',
  dateRange: []
})

// 解析时间字符串为 Date（格式：YYYY-MM-DD HH:mm:ss）
const parseDateTime = (str) => {
  if (!str) return null
  const [datePart, timePart] = str.split(' ')
  if (!datePart || !timePart) return null
  const [y, m, d] = datePart.split('-').map(Number)
  const [hh, mm, ss] = timePart.split(':').map(Number)
  return new Date(y, m - 1, d, hh, mm, ss)
}

// 基于已应用筛选条件的过滤结果
const filteredLogs = computed(() => {
  const { module, status, dateRange } = appliedFilters.value
  return operationLogs.value.filter((row) => {
    if (module && row.module !== module) return false
    if (status && row.status !== status) return false
    if (Array.isArray(dateRange) && dateRange.length === 2) {
      const [start, end] = dateRange
      const rowTime = parseDateTime(row.time)
      if (!rowTime) return false
      if (rowTime < start || rowTime > end) return false
    }
    return true
  })
})

// 过滤后的总数用于分页展示
const total = computed(() => filteredLogs.value.length)

// 当前页展示的数据
const displayLogs = computed(() => {
  const startIdx = (currentPage.value - 1) * pageSize.value
  const endIdx = startIdx + pageSize.value
  return filteredLogs.value.slice(startIdx, endIdx)
})

// 筛选条件
const filterForm = ref({
  module: '',
  status: '',
  dateRange: []
})

// 模块选项
const moduleOptions = [
  { label: '全部', value: '' },
  { label: '系统', value: '系统' },
  { label: '评测管理', value: '评测管理' },
  { label: '报告管理', value: '报告管理' },
  { label: '数据管理', value: '数据管理' },
  { label: '个人中心', value: '个人中心' }
]

// 状态选项
const statusOptions = [
  { label: '全部', value: '' },
  { label: '成功', value: 'success' },
  { label: '失败', value: 'error' }
]

// 获取状态标签类型
const getStatusType = (status) => {
  return status === 'success' ? 'success' : 'danger'
}

// 获取状态文本
const getStatusText = (status) => {
  return status === 'success' ? '成功' : '失败'
}

// 搜索操作
const handleSearch = () => {
  // 应用当前筛选条件并重置到第一页
  appliedFilters.value = {
    module: filterForm.value.module,
    status: filterForm.value.status,
    dateRange: filterForm.value.dateRange
  }
  currentPage.value = 1
}

// 重置搜索
const handleReset = () => {
  filterForm.value = {
    module: '',
    status: '',
    dateRange: []
  }
  appliedFilters.value = {
    module: '',
    status: '',
    dateRange: []
  }
  currentPage.value = 1
}

// 分页处理
const handleSizeChange = (val) => {
  pageSize.value = val
}

const handleCurrentChange = (val) => {
  currentPage.value = val
}
</script>

<template>
  <div class="operation-log">
    <div class="header">
      <h2>操作日志</h2>
    </div>
    
    <div class="content">
      <!-- 搜索区域 -->
      <div class="search-area">
        <el-form :model="filterForm" inline>
          <el-form-item label="模块">
            <el-select v-model="filterForm.module" placeholder="请选择模块" style="width: 150px">
              <el-option 
                v-for="option in moduleOptions" 
                :key="option.value"
                :label="option.label" 
                :value="option.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="filterForm.status" placeholder="请选择状态" style="width: 120px">
              <el-option 
                v-for="option in statusOptions" 
                :key="option.value"
                :label="option.label" 
                :value="option.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="时间范围">
            <el-date-picker
              v-model="filterForm.dateRange"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              style="width: 350px"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSearch">
              <el-icon><Search /></el-icon>
              搜索
            </el-button>
            <el-button @click="handleReset">
              <el-icon>
                <svg
                  viewBox="0 0 24 24"
                  width="1em"
                  height="1em"
                  fill="none"
                  stroke="currentColor"
                  stroke-width="1.8"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                >
                  <circle cx="12" cy="12" r="9" />
                  <line x1="8" y1="12" x2="16" y2="12" />
                </svg>
              </el-icon>
              重置
            </el-button>
          </el-form-item>
        </el-form>
      </div>
      
      <!-- 日志表格 -->
      <div class="table-area">
        <el-table :data="displayLogs" style="width: 100%">
          <el-table-column prop="action" label="操作" width="120" />
          <el-table-column prop="module" label="模块" width="120" />
          <el-table-column prop="details" label="操作详情" min-width="200" />
          <el-table-column prop="ip" label="IP地址" width="140" />
          <el-table-column prop="time" label="操作时间" width="160" />
          <el-table-column prop="status" label="状态" width="80">
            <template #default="scope">
              <el-tag :type="getStatusType(scope.row.status)" size="small">
                {{ getStatusText(scope.row.status) }}
              </el-tag>
            </template>
          </el-table-column>
        </el-table>
        
        <!-- 分页 -->
        <div class="pagination-area">
          <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :page-sizes="[10, 20, 50, 100]"
            background
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.operation-log {
  padding: 20px;
  background-color: #f5f7fa;
  height: 570px;
}

.header {
  margin-bottom: 20px;
}

.header h2 {
  color: #333;
  font-size: 24px;
  font-weight: 500;
}

.content {
  max-width: 1200px;
}

.search-area {
  background: white;
  padding: 20px;
  border-radius: 8px 8px 0 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin-bottom: 0;
}

.table-area {
  background: white;
  padding: 20px;
  border-radius: 0 0 8px 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.pagination-area {
  display: flex;
  justify-content: center;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #eee;
}

:deep(.el-table th) {
  background-color: #f5f7fa !important;
  text-align: center;
}

:deep(.el-table td) {
  text-align: center;
}
</style>